import { Link, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { gatewayAPI } from "../../apis/gateway";
import { TableColumnType } from "../../interface";
import { Table } from "antd";
import { fmtTimeStamp } from "../../utils";

const ApiErrorDetail = () => {
  const { id } = useParams<{ id: string }>();
  const [tableData, setTableData] = useState();
  const [loading, setLoading] = useState(false);
  const [pager, setPager] = useState({
    pageIndex: 1,
    pageSize: 10,
    total: 0
  });

  useEffect(() => {
    getTableData()
  }, [pager.pageIndex])

  function getTableData() {
    setLoading(true);
    gatewayAPI.errorHistory({
      searchKey: id,
      pageIndex: pager.pageIndex,
      pageSize: pager.pageSize,
    }).then((res: any) => {
      if (res && res.success) {
        setTableData(res.data.list);
        setPager({
          ...pager,
          total: res.data.total
        })
      }
    }).finally(() => {
      setLoading(false);
    })
  }

  const columns: TableColumnType[] = [
    {
      title: 'url',
      dataIndex: 'url',
      key: 'url',
      width: '40%',
      ellipsis: true
    },
    {
      title: '发生时间',
      dataIndex: 'time',
      key: 'time',
      render: (t: number) => {
        return <span>{fmtTimeStamp(+t)}</span>
      }
    },
    {
      title: '状态码',
      dataIndex: 'http_code',
      key: 'http_code',
    },
    // {
    //   title: '影响用户',
    //   dataIndex: 'user_count',
    //   key: 'user_count',
    //   width: '15%'
    // },
    // {
    //   title: '发生次数',
    //   dataIndex: 'count',
    //   key: 'count',
    //   width: '15%'
    // }
  ]


  return (
    <div>
      <Table
        // onChange={onChange}
        rowKey={ "id" }
        bordered
        columns={ columns }
        size={"middle"}
        loading={ loading }
        // size={tableSize}
        dataSource={ tableData }
        pagination={{
          showQuickJumper: false,
          showTotal: () => `共 ${ pager.total } 条`,
          pageSize: pager.pageSize,
          total: pager.total,
          current: pager.pageIndex,
          onChange: (v) => setPager({
            ...pager,
            pageIndex: v,
          })
        }}
      />
    </div>
  )
}

export default ApiErrorDetail;